<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <div class="uc-nav">
        <ul  id="content_grid">
            <li class="active"><a href="javascript:;">全部</a></li>
            <li rel="3"><a href="javascript:;">办理中</a></li>
            <li rel="9"><a href="javascript:;">已办结</a></li>
            <li rel="-1"><a href="javascript:;">已撤销</a></li>
            <li rel="13"><a href="javascript:;">已退回</a></li>
        </ul>
        <div class="uc-search">
            <button id="search_task"><i class="glyphicon glyphicon-search"></i></button>
            <input name="" id="tsk_num" type="text" placeholder="请输入查询订单号">
        </div>
    </div>
    <div  >
        <div id="content_tasks" class="ucr-centent">
        </div>
        <div style="text-align: center;">
            <ul class="pagination" id="pagination_tasks"></ul>
        </div>

    </div>
    <!-- 模板-->
    <script id="temp_tasks" type="text/html">
        <table  class="table">
            <colgroup>
                <col width="40%">
                <col width="15%">
                <col width="15%">
                <col width="15%">
                <col width="15%">
            </colgroup>
            <thead>
            </thead>
            <tbody>
            {{if list.length<1}}
            <tr>
                <td>
                    暂未找到您的数据
                </td>
            </tr>
            {{/if}}
            {{each list as value i}}
            <tr>
                <td colspan="5">
                    <table class="table">
                        <colgroup>
                            <col width="40%">
                            <col width="30%">
                            <col width="15%">
                            <col width="15%">
                        </colgroup>
                        <tbody>
                        <tr class="td-title">
                            <td colspan="5">
                                <p>办件编号：{{value.tskNum}}</p>
                                <a href="javascript:;" onclick="deleteTask('{{value.guid}}')" class="delete-a">删除</a>
                            </td>
                        </tr>
                        <tr>
                            <td>{{value.matName}}</td>

                            <td>{{value.startdodate}}</td>
                            <td>
                                <p class="text-green">{{value.projectstatusCn}}</p>
                                {{ if value.projectstatus==2}}
                                <a href="javascript:;" onClick="$('.pay-modal').modal();" class="">支付</a>
                                {{/if}}
                                {{ if value.isMailmertal!=0}}
                                <a href="javascript:;" class="">邮寄信息</a>
                                {{/if}}
                            </td>
                            <td>
                                <a href="javascript:;"  onclick="showDetail('{{value.tskNum}}')" class="">办件详情</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            {{/each}}
            </tbody>
        </table>

    </script>
<script id="temp_task_detail" type="text/html">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
        </button>
        <h2 class="thing-h">{{matName}}</h2>
    </div>
    <div class="modal-body">
    <div class="thing-item">
        <div class="thing-item-title">办件详情</div>
        <div class="thing-item-bd">
            <table class="table table-bordered">
                <tr>
                    <th>办件编号：</th>
                    <td>{{tskNum}}</td>
                    <th>受理部门：</th>
                    <td>{{deptName}}</td>
                </tr>
                <tr>
                    <th>申报时间：</th>
                    <td>{{startdodate}}</td>
                    <th>承诺天数：</th>
                    <td>{{duedays}}天</td>
                </tr>
                <tr>
                    <th>办件状态：</th>
                    <td colspan="3">{{projectstatusCn}}</td>
                </tr>
                <tr>
                    <th>办理流程：</th>
                    <td colspan="3">
                        <div class="planNode clearfix">
                            <ul>
                                {{if projectstatus==9}}
                                <li class="active"><span>申请</span><i class="glyphicon glyphicon-ok"></i></li>
                                <li class="active"><span>审批</span><i class="glyphicon glyphicon-ok"></i></li>
                                <li class="active"><span>办结</span><i class="glyphicon glyphicon-ok"></i></li>
                                {{else if projectstatus==3}}
                                <li class="active"><span>申请</span><i class="glyphicon glyphicon-ok"></i></li>
                                <li class="active"><span>审批</span><i class="glyphicon glyphicon-ok"></i></li>
                                <li><span>办结</span><i class="glyphicon glyphicon-ok"></i></li>
                                {{else if projectstatus==1 || projectstatus==2}}
                                <li class="active"><span>申请</span><i class="glyphicon glyphicon-ok"></i></li>
                                <li><span>审批</span><i class="glyphicon glyphicon-ok"></i></li>
                                <li><span>办结</span><i class="glyphicon glyphicon-ok"></i></li>
                                {{else}}
                                <li><span>申请</span><i class="glyphicon glyphicon-ok"></i></li>
                                <li><span>审批</span><i class="glyphicon glyphicon-ok"></i></li>
                                <li><span>办结</span><i class="glyphicon glyphicon-ok"></i></li>
                                {{/if}}
                                <%--<li class="active"><span>申请</span><i class="glyphicon glyphicon-ok"></i></li>--%>
                                <%--<li class="active"><span>审批</span><i class="glyphicon glyphicon-ok"></i></li>--%>
                                <%--<li class="active"><span>支付</span><i class="glyphicon glyphicon-ok"></i></li>--%>
                                <%--<li class="active"><span>取件</span><i class="glyphicon glyphicon-ok"></i></li>--%>
                                <%--<li><span>办结</span><i class="glyphicon glyphicon-ok"></i></li>--%>
                                <%--<li><span>送件</span><i class="glyphicon glyphicon-ok"></i></li>--%>
                            </ul>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
   <%-- <div class="thing-item">
        <div class="thing-item-title">填报信息</div>
        <div class="thingDetails-bd">
            <table class="table table-bordered">
                <caption>入伍人员信息</caption>
                <thead>
                <tr>
                    <th>姓名</th>
                    <th>公民身份证号</th>
                </tr>
                </thead>
                <tr>
                    <td>张勇</td>
                    <td>325698741598745699</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="thing-item">
        <div class="thing-item-title">办理方式</div>
        <div class="thing-item-bd">
            <div class="tib-addr">
                <dl>
                    <dt><i></i>上门取件:</dt>
                    <dd>刘明星 河南省郑州市金水区 花园路街道 金水路9号河南省公安厅 13937181708</dd>
                </dl>
                <dl>
                    <dt><i></i>送件地址:</dt>
                    <dd>刘明星 河南省郑州市金水区 花园路街道 金水路9号河南省公安厅 13937181708</dd>
                </dl>
            </div>

            <table class="table table-bordered table-td-yellow">
                <caption>支付费用</caption>
                <thead>
                <tr>
                    <th>费用名称</th>
                    <th>金额</th>
                    <th>费用说明</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>上门取件快递</td>
                    <td>10元</td>
                    <td>上门取件费用。。</td>
                </tr>
                <tr>
                    <td>送件上门快递</td>
                    <td>10元</td>
                    <td>上门取件费用。。</td>
                </tr>
                <tr>
                    <td>办件工本费</td>
                    <td>4元</td>
                    <td>办件工本费用。。</td>
                </tr>
                </tbody>
            </table>

            <dl class="tib-payWay">
                <dt>支付方式：</dt>
                <dd>线上支付</dd>
            </dl>

        </div>
    </div>--%>
    {{ if manifests.length>0 }}
    <div class="thing-item">
        <div class="thing-item-title">申报材料</div>
        <div class="thing-item-bd">
            <ul class="text-ul">
                {{each manifests as value i}}
                <li>{{i+1}}.{{value.materialName}}</li>
                {{/each}}
            </ul>
        </div>
    </div>
    {{/if}}
    </div>
    <div class="modal-footer">
        <div class="btn-box">
            <a  class="btn btn-yellow btn-lg" href="javascript:;" onclick="cancleTask('{{guid}}')">撤销</a>
            <a  class="btn btn-yellow btn-lg" href="javascript:;" onclick="$('.detail-modal').modal('hide');">取消</a>
        </div>
    </div>
</script>
<%--<script  id="temp_task_detail" type="text/html">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title">办件详情</h4>
    </div>
    <div class="modal-body">
        <div class="pay-modal-info">
            <table class="table table-bordered">
                <tr>
                    <th>办件编号：</th>
                    <td>{{tskNum}}</td>
                    <th>事项名称：</th>
                    <td>{{matName}}</td>
                </tr>
                <tr>
                    <th>数据来源：</th>
                    <td>
                        {{ if tskSouce=='SYS'}}
                        本系统
                        {{else if tskSouce=='INT'}}
                        地市上传数据
                        {{else}}
                        其它
                        {{/if}}
                    </td>
                    <th>申报方式：</th>
                    <td>
                        {{ if netprojecttype=='PCP'}}
                        大厅申报
                        {{/if}}
                        {{ if netprojecttype=='WIN'}}
                        窗口办件
                        {{/if}}
                        {{ if netprojecttype=='WEI'}}
                        微信申报
                        {{/if}}
                        {{ if netprojecttype=='WAP'}}
                        wap申报
                        {{/if}}
                        {{ if netprojecttype=='APP'}}
                        移动端申报
                        {{/if}}
                    </td>
                </tr>
                <tr>
                    <th>办件状态：</th>
                    <td>{{projectstatusCn}}</td>
                    <th>申报时间：</th>
                    <td>{{startdodate}}</td>
                </tr>
                <tr>
                    <th>承诺天数：</th>
                    <td>{{duedays}}天</td>
                    <th>处理部门名称：</th>
                    <td>{{deptName}}</td>
                </tr>
                <tr>
                    <th>申报人名称：</th>
                    <td>{{unitname}}</td>
                    <th>申请人手机号：</th>
                    <td>{{handphone}}</td>
                </tr>
                <tr>
                    <th>身份证号码：</th>
                    <td>{{unitnumber.substring(0,6)}}***********{{unitnumber.substring(17, -1)}}</td>
                    <th>地址：</th>
                    <td>{{unitaddress}}</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="modal-footer">
        <div class="btn-box">
            <a  class="btn btn-yellow btn-lg" href="javascript:;" onclick="cancleTask('{{guid}}')">撤销</a>
            <a  class="btn btn-yellow btn-lg" href="javascript:;" onclick="$('.detail-modal').modal('hide');">取消</a>
        </div>
    </div>

</script>--%>
<div class="modal fade pay-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">立即支付</h4>
            </div>
            <div class="modal-body">
                <div class="pay-modal-info">
                    <h3>办件信息</h3>
                    <table class="table table-bordered">
                        <tr>
                            <th>办件编号：</th>
                            <td>P000096160913080001</td>
                            <th>事项名称：</th>
                            <td>出生婚生婴儿落户 一、父母在同一户口薄的</td>
                        </tr>
                        <tr>
                            <th>数据来源：</th>
                            <td>本系统</td>
                            <th>申报方式：</th>
                            <td>网上申报办件</td>
                        </tr>
                        <tr>
                            <th>办件状态：</th>
                            <td>已提交</td>
                            <th>申报时间：</th>
                            <td>2016/9/13 18:18:09</td>
                        </tr>
                        <tr>
                            <th>办件类型：</th>
                            <td>即办件</td>
                            <th>处理部门名称：</th>
                            <td>长白山公安局池北分局滨河派出所</td>
                        </tr>
                        <tr>
                            <th>申报人名称：</th>
                            <td>曹大为</td>
                            <th>申请人手机号：</th>
                            <td>17715369021</td>
                        </tr>
                        <tr>
                            <th>身份证号码：</th>
                            <td>220322***********0</td>
                            <th>地址：</th>
                            <td>云南省-昆明市-五华区-</td>
                        </tr>
                    </table>
                    <h3>支付费用</h3>
                    <table class="table table-bordered table-td-yellow">
                        <thead>
                        <tr>
                            <th>费用名称</th>
                            <th>金额</th>
                            <th>费用说明</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>上门取件快递</td>
                            <td>10元</td>
                            <td>上门取件费用。。</td>
                        </tr>
                        <tr>
                            <td>送件上门快递</td>
                            <td>10元</td>
                            <td>上门取件费用。。</td>
                        </tr>
                        <tr>
                            <td>办件工本费</td>
                            <td>4元</td>
                            <td>办件工本费用。。</td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="pay-choose">
                        <label class="radio-inline">
                            <input type="radio" name="" value=""> 银联支付
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="" value=""> 支付宝
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="" value=""> 微信支付
                        </label>
                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <div class="btn-box">

                    <a   target="_blank" class="btn btn-yellow btn-lg" href="emspay">在线支付</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade detail-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content"  id="content_task_detail">

        </div>
    </div>
</div>
<script type="text/javascript">
    var options={
                    type: 'GET',
                    data: {
                        ps: 5,
                        pi: 1,
                        tsk_reserve:"N"
                    },
                    url: '<c:url value="/usercenter/task-list"></c:url>',
                    tempId: "temp_tasks",
                    paginger: "pagination_tasks",
                    containerId: "content_tasks",
                    errorCallback: function (data) {
                        if(data.msg){
                            toast(data.msg);
                        }else{
                            toast("服务器异常");
                        }
                    }
                };
    $().ready(function(){
        //页面绑定
        $("#content_grid li").each(function(){
            $(this).click(function(){
                options.data.tsk_num=$("#tsk_num").val();
                options.data.projectStatus=$(this).attr("rel");
                options.data.pi=1;
                new Paging(options).getPagList();
                $(".active").removeClass("active");
                $(this).addClass("active");
            })
        })
        //初始化页面加载
        options.data.tsk_num=$("#tsk_num").val();
        options.data.projectStatus=$(".active").attr("rel");
        options.data.pi=1;
        new Paging(options).getPagList();
        
        $("#search_task").click(function () {
            options.data.tsk_num=$("#tsk_num").val();
            options.data.projectStatus=$(".active").attr("rel");
            options.data.pi=1;
            new Paging(options).getPagList();
        });
    });
    function showDetail(num) {
        $.ajax({
            type: "GET",
            url: "<c:url value='/taskbases/num'/>",
            data: {
                num:num
            },
            dataType: "json",
            success: function (resp) {
                if(resp.succ){
                    var shtml = template("temp_task_detail", resp.data);
                    $("#content_task_detail").html(shtml);
                    $('.detail-modal').modal();
                }else{
                    toast(resp.msg);
                }
            },
            error: function () {
                toast("服务器异常");
            }
        });

    }
    function cancleTask(guid) {
        $.ajax({
            type: "PATCH",
            url: "<c:url value='/usercenter/'/>"+guid,
            data: JSON.stringify({
                tskCancle:'Y',
                projectstatus:"-1",
                projectstatusCn:"已撤销"
            }),
            contentType: 'application/json;charset=utf-8',
            dataType: "json",
            success: function (resp) {
                if(resp.succ){
                    toast("撤销成功");
                    options.data.tsk_num=$("#tsk_num").val();
                    options.data.projectStatus=$(".active").attr("rel");
                    options.data.pi=1;
                    new Paging(options).getPagList();
                }else{
                    toast(resp.msg);
                }
            },
            error: function () {
                toast("服务器异常");
            }
        });
    }
    function deleteTask(guid){
        $.ajax({
            type: "PATCH",
            url: "<c:url value='/usercenter/'/>"+guid,
            data: JSON.stringify({
                deleted:'Y'
            }),
            contentType: 'application/json;charset=utf-8',
            dataType: "json",
            success: function (resp) {
                if(resp.succ){
                    toast("删除成功");
                    options.data.tsk_num=$("#tsk_num").val();
                    options.data.projectStatus=$(".active").attr("rel");
                    options.data.pi=1;
                    new Paging(options).getPagList();
                }else{
                    toast(resp.msg);
                }
            },
            error: function () {
                toast("服务器异常");
            }
        });
    }
</script>